<template>
  <div style="padding: 10px;">
    <el-row>
      <el-col :span="22">
        <el-form inline :model="form_data" ref="searchForm">
          <el-form-item label="资方" prop="type">
            <el-select filterable  placeholder="资方" v-model="form_data.type">
              <el-option label="供销" value="1"></el-option>
              <el-option label="一二三三" value="2"></el-option>
              <el-option label="深农" value="3"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="装柜日期" prop="loadingTime">
            <el-date-picker
              v-model="loadingTime"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item prop="number">
            <el-input placeholder="搜索柜号/合同号" v-model="form_data.number"></el-input>
          </el-form-item>
          <el-form-item prop="supplyListStatus">
            <el-select filterable  placeholder="状态" v-model="form_data.supplyListStatus">
              <el-option v-for="item in dict.type.supply_list_status" :key="item.value" :label="item.label"
                         :value="item.value"  ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button @click="getData" type="primary" size="mini">搜索</el-button>
            <el-button @click="resetData" size="mini">重置</el-button>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="2">
        <div style="text-align: right;">
          <el-button type="primary" size="mini" @click="exportsData" >导出</el-button>
        </div>
      </el-col>
      <el-col>
        <el-table :data="table_data"  :height="table_height" >
          <el-table-column label="合同号" prop="contractNumber"></el-table-column>
          <el-table-column label="柜号" prop="containerNumber" ></el-table-column>
          <el-table-column label="产品" prop="productNames" ></el-table-column>
          <el-table-column label="付汇金额" prop="paymentPrice" ></el-table-column>
          <el-table-column label="付汇日期" prop="paymentDate" ></el-table-column>
          <el-table-column label="税金" prop="actualImportTax" ></el-table-column>
          <el-table-column label="付税日期" prop="taxPaymentDate" ></el-table-column>
          <el-table-column label="预付款" prop="prepaymentAmt" ></el-table-column>
          <el-table-column label="尾款" prop="finalPayment" ></el-table-column>
          <el-table-column label="利息" prop="interest" ></el-table-column>
          <el-table-column label="状态" prop="overseasFreightCost" ></el-table-column>
        </el-table>
        <pagination
          v-show="list_total>0"
          :total="list_total"
          :page.sync="list_params.pageNum"
          :limit.sync="list_params.pageSize"
          @pagination="getData"
        />
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { capitalSettlement, capitalSettlementExport } from '@/api/report/report'
import {list as ownerList} from "@/api/base/owner";
import { list as capitalList } from "@/api/base/capital";
export default {
  name: "settlement_fruit",
  dicts:['order_product_type','supply_list_status'],
  data(){
    return {
      table_height:window.innerHeight - 300,
      list_params: {
        pageNum: 1,
        pageSize: 10,
        customer:'',
        subjectName:'',
      },
      list_total:0,
      loadingTime:'',
      table_data:[],
      form_data:{
        cargoOwnerId:'',
        type:'',
        number:'',
        supplyListStatus:''
      },
      owner_list:[],
      capital_list:[]
    }
  },
  created(){
    this.getOwnerList()
    this.getCapitalList()
  },
  methods:{
    getCapitalList(){
      capitalList({is_page:0}).then(res=>{
        this.capital_list = res.rows
      })
    },
    getOwnerList(){
      ownerList({is_page:0}).then(res=>{
        this.owner_list = res.rows
      })
    },
    resetData(){
      this.loadingTime = []
      this.$refs.searchForm.resetFields()
      this.getData()
    },
    getData() {
      if (this.form_data.type == '') {
        this.$message.error('请选择资方')
        return
      }
      this.form_data = {
        ...this.form_data,
        pageNum:this.list_params.pageNum,
        pageSize:this.list_params.pageSize
      }
      console.log(this.loadingTime)
      if (this.loadingTime) {
        this.form_data = {
          ...this.form_data,
          loadingTimeStart:this.loadingTime[0],
          loadingTimeEnd:this.loadingTime[1]
        }
      }
      capitalSettlement(this.form_data).then(res=>{
        this.table_data = res.rows
        this.list_total = res.total
      })
    },
    exportsData(){
      capitalSettlementExport(this.form_data).then(res=>{
        const url= window.URL.createObjectURL(new Blob([res]));
        const link= document.createElement('a');
        link.href = url;
        link.download =`结算清单(按资方)_${new Date().getTime()}.xlsx`;
        link.click();
      })
    }
  }
}
</script>

<style scoped>

</style>
